<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">

	<!-- DataTables CSS -->
	<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
	 
	<!-- jQuery -->
	<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	 
	<!-- DataTables -->
	<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>

	<!-- 1. 引入三个文件 1. jQuery 2. dt.js 3. css -->
	<title>dattable插件使用</title>
</head>
<body>
	<div class="container">
		<table class="table table-bordered table-hover" id="table_id_example" class="display">
		    <thead>
		        <tr>
		            <th>id</th>
		            <th>用户名</th>
		            <th>邮箱</th>
		            <th>开始日期</th>
		        </tr>
		    </thead>
		    <tbody>
		        <!-- 留空即可 下面插件会自动填充 -->
		    </tbody>
		</table>
	</div>
 
</body>
<script type="text/javascript">
	$(document).ready( function () {
		// 选择要处理的表格
		// 1. 数据变活，用户自定义数据 模拟从后端ajax获取的
		    var data = [
		        {	
		        	"id"	:     12, 
		            "name":       "Tiger Nixon",
		            "email": 	  "gogery@163.com",
		            "position":   "System Architect",
		            "salary":     "$3,120",
		            "start_date": "2011/04/25",
		            "office":     "Edinburgh",
		            "extn":       "5421"
		        },
		        {	
		        	"id"	:     22, 
		            "name":       "liyang",
		            "email": 	  "Tiger@gmail.com",
		            "position":   "System Architect",
		            "salary":     "$3,120",
		            "start_date": "2011/04/25",
		            "office":     "Edinburgh",
		            "extn":       "5421"
		        },
		    ];
		// 接收一个对象作为其参数，data属性代表是处理的数据 columns代表如何去展示数据？【表格展示： 规定列】
	    $('#table_id_example').DataTable({
	    	 data: data,
	        //使用对象数组，一定要配置columns，告诉 DataTables 每列对应的属性
	        //data 这里是固定不变的，name，position，salary，office 为你数据里对应的属性
	        columns: [
	        	{ data: 'id'}, 
	            { data: 'name' }, // 是一个数组，数组中的每个元素用来定义表格的每列的含义
	            { data: 'email', bSortable: },
	            { data: 'start_date'}
	        ]
	    });
	} );

</script>
</html>